<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<link href="statics/css/web.css" rel="stylesheet" type="text/css">
	<title></title>
</head>
<body>

<div class="bigbox" style="position:relative; top:0; left:0;">
	
	<div class="headbox">
		<div class="back">
			<em></em>
		</div>
		<h3>
		<span>请输入省份</span>
	    </h3>
	</div>

	<div class="province item">
		<button>广东省</button>
		<button>广西壮族自治区</button>
		<button>四川省</button>
		<button>湖南省</button>
		<button>山东省</button>
		<button>黑龙江省</button>
		<button>吉林省</button>
		<button>湖北省</button>
		<button>海南省</button>
		<button>辽宁省</button>
		
	</div>
	<div class="city item" style="position: absolute; left: 380px; top: 50px; width: 200px; height: 400px; border: 1px solid #ccc; display:none">
		<button>云浮</button>
		<button>广州</button>
		<button>梅州</button>
		<button>河源</button>
		<button>柳州</button>
		<button>南宁</button>
		<button>桂林</button>
		<button>成都</button>
		<button>攀枝花</button>
		<button>长沙</button>
		<button>济南</button>
		<button>哈尔滨</button>
		<button>长春</button>
		<button>十堰</button>
		<button>海口</button>
		<button>本溪</button>
	</div>
	<div class="area item" style="position: absolute; left: 600px; top: 100px; width: 200px; border: 1px solid #ccc;
	 display:none">
		<button>云安区</button>
		<button>白云区</button>
		<button>梅江区</button>
		<button>源城区</button>
		<button>柳北区</button>
		<button>清秀区</button>
		<button>秀峰区</button>
		<button>金牛区</button>
		<button>仁和区</button>
		<button>天心区</button>
		<button>市中区</button>
		<button>南岗区</button>
		<button>南关区</button>
		<button>勋阳区</button>
		<button>秀英区</button>
		<button>平山区</button>
	</div>

</div>
<script type="text/javascript" src="statics/js/jquery3.js"></script>
<script type="text/javascript">

	 function showarea(btn){
		var cid = $(btn).val();
        console.log();
         
		 $('.province').show();
		 $('.city').show();
		 $('.area').show();

 		 $('.area').empty();

 		 $.get('statics/jon/area.json',function(res){
		for(var i=0;i<res.length;i++){
			if(cid==res[i].pid){
 		 		//var btn="";
 		 		var btn='<button onclick="showarea(this)" value="'+res[i].id+'">'+res[i].name+'</button>';
 		 		$('.area').append(btn);
 		 	}
			}
 		})

}

	function showcity(btn){
		var pid = $(btn).val();
        console.log();
         
		 $('.province').show();
		 $('.city').show();
		 $('.area').hide();

 		 $('.city').empty();

 		 $.get('statics/jon/city.json',function(res){
		for(var i=0;i<res.length;i++){
			if(pid==res[i].pid){
 		 		//var btn="";
 		 		var btn='<button onclick="showarea(this)" value="'+res[i].id+'">'+res[i].name+'</button>';
 		 		$('.city').append(btn);
 		 	}
			}
 		})

}

	function InitProvince(){
		$('.province').empty();

		 $.get('statics/jon/proinve.json',function(res){
			for(var i=0;i<res.length;i++){
		 		//var btn="";
		 		var btn='<button onclick="showcity(this)" value="'+res[i].id+'">'+res[i].name+'</button>';
		 		$('.province').append(btn);
			}
		})
	}
InitProvince();

	$('.back').click(function(){
		/*获取城市div的显示状态*/
		var bctiy = $('.city').css('idsplay');
		var barea = $('.area').css('display');

		if(barea=='block'){
			$('.area').hide();
		}

		if(barea=='none' && bctiy=='block'){
			$('.city').hide();
		} 
	})

// <a href="javascript :;" onClick="javascript :history.back(-1);">返回上一页</a>
// <a href="javascript :;" onClick="javascript :history.back(-1);"><img src="图片路径" border="0" title="返回上一页"></a>

//function goForward(){
        //history.forward();      
//}       

</script>
</body>
</html>